<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .main {

        /*网格布局,布局正常就是块级的，
        但有时候可能由于项目需求要变成行块， inline-grid看情况*/
        display: grid;

        /*grid-template-rows设置几行，需要行高多大*/
        /*grid-template-rows：1fr 2fr 3fr；倍数用法*/
        grid-template-rows: repeat(6,100px);
        /*rid-template-columns设置列宽需要多大*/
        /*repeat用法（几个，每个多大），
        第二种写法，设置循环几次，假设循环（循环3次，10px 20px 30px）第一次循环过一遍10px 20px 30px，持续三次*/
        grid-template-columns: repeat(2,[r]100px  100px 100px);
    }
    .text {
        width: 50px;
        height: 50px;
        background-color: red;

        /*设置文本居中*/
        text-align: center;

        /*设置行高跟盒子高度一样是会居中*/
        line-height: 50px;
        border: 1px solid black;
        border-radius: 50%;
        box-shadow:10px 10px 3px  orange;
    }
    span{
        font-size: 50px;
        color: red;
    }
</style>
<body>
<h2>本期双色球中奖号码：<span>6</span>号!!!<span>奖金3000万</span></h2>

<div class="main">
    <div class="text ">1</div>
    <div class="text">2</div>
    <div class="text">3</div>
    <div class="text">4</div>
    <div class="text">5</div>
    <div class="text">6</div>
    <div class="text">7</div>
    <div class="text">8</div>
    <div class="text">9</div>
    <div class="text ">10</div>
    <div class="text">11</div>
    <div class="text">12</div>
    <div class="text">13</div>
    <div class="text">14</div>
    <div class="text">15</div>
    <div class="text">16</div>
    <div class="text">17</div>
    <div class="text">18</div>
    <div class="text ">19</div>
    <div class="text">20</div>
    <div class="text">21</div>
    <div class="text">22</div>
    <div class="text">23</div>
    <div class="text">24</div>
    <div class="text">25</div>
    <div class="text">26</div>
    <div class="text">27</div>
    <div class="text ">28</div>
    <div class="text">29</div>
    <div class="text">30</div>
    <div class="text">31</div>
    <div class="text">32</div>
    <div class="text">33</div>
    <div class="text">34</div>
    <div class="text">35</div>
    <div class="text">36</div>
</div>
</body>
</html>